<script lang="ts">
import {
    defineComponent,
    reactive,
    ref,
    onMounted,
    computed,
    watch,
} from "vue";
import { getAnnouncementList } from "@/api";
import { AppModule } from "@/store/modules/app";

export default defineComponent({
    setup() {
        const open = ref(false)
        const setat = reactive({
            pageNum: 0,
            pageSize: 20,
            languageId: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list = ref([]);
        const onLoad = async () => {
            const res = await getAnnouncementList(setat);
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = list.value.concat(res.data.data.AnnouncementList || []);
            loading.value = false;
            setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        const onRefresh = () => {
            switch (AppModule.language) {
                case "en":
                    setat.languageId = 0;
                    break;
                case "zh":
                    setat.languageId = 1;
                    break;
                case "tw":
                    setat.languageId = 2;
                    break;
                case "ko":
                    setat.languageId = 3;
                    break;
                case "ja":
                    setat.languageId = 4;
                    break;
                case "th":
                    setat.languageId = 5;
                    break;
                case "ar":
                    setat.languageId = 6;
                    break;
            }
            open.value = true;
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            refreshing.value = true
            onLoad();
        };

        const removeHtmlStyle = (html: any) => {
            let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式
            let relTag = /<.+?>/g; //去除标签
            let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g; // 清除类名
            let newHtml = "";
            if (html) {
                newHtml = html.replace(relStyle, "");
                newHtml = html.replace(relTag, "");
            }
            return newHtml;
        };

        return {
            open,
            list,
            refreshing,
            loading,
            finished,
            onLoad,
            onRefresh,
            removeHtmlStyle,
        };
    },
});
</script>
<template>
    <van-popup v-model:show="open" position="right" closeable close-icon-position="top-left" close-icon="arrow-left"
        teleport="body" :style="{
            width: '100%', height: '100%', background: `rgba(246, 246, 246, 1)`
        }">
        <div class="page">
            <div class="title" @click="open = false">{{ $t('layout.announcement') }} </div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')"
                    @load="onLoad">
                    <ul>
                        <li v-for="(item, index) in list" :key="index">
                            <div class="bg" @click="$refs.announcementRefs.show(item)">
                                <div class="name van-ellipsis">
                                    {{ item.Title }}
                                </div>
                                <div class="content van-multi-ellipsis--l2" v-html="removeHtmlStyle(item.Content)"></div>
                                <div class="more">
                                    {{ item.UpdatedAt }}<van-icon name="arrow" />
                                </div>
                            </div>
                        </li>
                    </ul>
                </van-list>
            </van-pull-refresh>
        </div>
    </van-popup>

    <announcement ref="announcementRefs" />
</template>
<style lang="less" scoped>
.page {
    padding: 0 15px;

    .title {
        padding-left: 30px;
        font-size: 16px;
        line-height: 54px;
    }

    ul {
        li {
            margin-top: 15px;
            background: #ffffff;
            border-radius: 8px;
            font-size: 12px;

            .date {
                text-align: center;

                span {
                    display: inline-block;
                    padding: 3px 7px;
                    font-size: 10px;
                    background: #251d0f;
                }
            }

            .bg {
                display: block;
                margin-top: 10px;
                padding: 20px 15px;
                color: #ffffff;
                border-radius: 5px;

                .name {
                    font-size: 18px;
                    font-weight: 400;
                    color: #0ba662;
                    overflow: hidden;
                }

                .content {
                    margin-top: 13px;
                    line-height: 16px;
                    overflow: hidden;
                    color: rgba(31, 33, 32, 1);
                }

                .more {
                    margin-top: 13px;
                    display: flex;
                    justify-content: space-between;
                    color: rgba(136, 136, 136, 1);
                }
            }
        }
    }
}
</style>